<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <button class="btn1">克隆第一个li（深克隆）</button>
    <button class="btn2">克隆第一个li（浅克隆）</button>
    浅克隆只会克隆标签，深克隆会克隆所有的子节点
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

<script>
    const ul = document.querySelector("ul")
    const li = document.querySelector("li:first-child")

    const btn1 = document.querySelector(".btn1")
    const btn2 = document.querySelector(".btn2")

    btn1.addEventListener("click", function() {
        ul.appendChild(ul.children[0].cloneNode(true))
    })

    btn2.addEventListener("click", function() {
        ul.appendChild(ul.children[0].cloneNode())
    })

</script>
</body>
</html>